<template>
  <div id="home">
    <h1>首页</h1>
    <div class="simple_echarts" id="BoardPostCount"></div>
    <div class="simple_echarts" id="LatestPostCount"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import { ElMessage } from 'element-plus';
export default {
  name: 'HomePage',
  mounted() {
    this.BoardPostCount()
    this.LatestPostCount()
  },
  methods: {
    BoardPostCount() {
      this.$http.GetPostCountForBoard().then(resp => {
        if (resp['code'] != 200) {
          ElMessage.error(resp["message"]);
          return;
        }
        var data = resp['data']
        var board_names = data["board_names"]
        var post_count = data["post_count"]
        var chartDom = document.getElementById('BoardPostCount');
        var myChart = echarts.init(chartDom);
        var option;

        option = {
          title:{
            text:"各版块帖子数量",
            x:"center",
            y:"bottom"
          },
          xAxis: {
            type: 'category',
            data: board_names
          },
          yAxis: {
            type: 'value'
          }, tooltip: {
            trigger: 'axis'
          },
          series: [
            {
              data: post_count,
              type: 'bar'
            }
          ]
        };
        option && myChart.setOption(option);
      })

    },
    LatestPostCount() {
      this.$http.GETLatestPostCount().then(resp => {
        if (resp['code'] != 200) {
          ElMessage.error(resp["message"]);
          return;
        }
        var data = resp['data']
        var latest_dates = data["latest_dates"]
        var post_count = data["post_count"]
        var chartDom = document.getElementById('LatestPostCount');
        var myChart = echarts.init(chartDom);
        var option;

        option = {
          title:{
            text:"近七天帖子数量",
            x:"center",
            y:"bottom"
          },
          xAxis: {
            type: 'category',
            data: latest_dates
          },
          yAxis: {
            type: 'value'
          },
          tooltip: {
            trigger: 'axis'
          },
          series: [
            {
              data: post_count,
              type: 'line',
              smooth: true
            }
          ]
        };
        option && myChart.setOption(option);
      })

    }
  }
}
</script>

<style scoped>
.simple_echarts {
  height: 500px;
  width: 50%;
}
</style>